<template>
	<view class="container">
		<!-- 页面内容 -->
		<scroll-view class="content">
			<!-- 热点新闻横幅 -->
			<view class="news-banner">
				<view class="newsImg"></view>
				<view class="banner-content">
					<!-- <text class="banner-main">早知道</text> -->
					<u--text class="banner-main" size="16" bold :lines="2" :text="newText">
					</u--text>
					<u--image :showLoading="true" src="/static/AIImg.jpg" width="60px" height="60px"
						@click="click"></u--image>
				</view>
				<!-- <view class="banner-bg"></view> -->
			</view>

			<!-- AI对话演练 -->
			<view class="ai-section knowledge-card" @click="opentask">
				<view class="section-title">AI对话演练</view>
				<!-- <view class="ai-content"> -->
				<u--image radius='10px' width='100%' height="150px" src="/static/AIImg.jpg" mode=""></u--image>
				<!-- <view class="ai-icon">AI</view>
					<view class="ai-text">
						<text class="ai-title">从流量到留量：农商行代发薪客群经营的新思维与实践路径</text>
						<text class="ai-desc">通过AI模拟真实业务场景，提升客户服务能力与营销技巧</text>
					</view> -->
				<!-- </view> -->
			</view>

			<!-- 知识模块网格 -->
			<view class="knowledge-grid">
				<view class="knowledge-card" v-for="item in knowledgeItems" :key="item.id"
					@click="navigateTo(item.path)">
					<view class="card-icon">{{ item.icon }}</view>
					<text class="card-title">{{ item.title }}</text>
					<text class="card-desc">{{ item.desc }}</text>
				</view>
			</view>
		</scroll-view>
		<view style="flex :1">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newText: '从流量到留量:农商行业代发薪客群经营的新思维与实践路径',
				knowledgeItems: [{
						id: 1,
						icon: '📚',
						title: '营销知识库',
						desc: '营销技巧与案例',
						path: '/pages/knowledge/marketing'
					},
					{
						id: 2,
						icon: '⚖️',
						title: '合规风险',
						desc: '合规指南与风险防控',
						path: '/pages/knowledge/compliance'
					},
					{
						id: 3,
						icon: '💼',
						title: '产品知识',
						desc: '产品介绍与特点',
						path: '/pages/knowledge/product'
					},
					{
						id: 4,
						icon: '📖',
						title: '法律法规',
						desc: '相关政策法规',
						path: '/pages/knowledge/law'
					}
				]
			}
		},
		methods: {
			opentask() {
				uni.navigateTo({
					url: "/homeNav/xxtd/components/taskProgress"
				})
			},
			navigateTo(path) {
				uni.navigateTo({
					url: "/homeNav/xxtd/components/studyList"
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
	}

	.content {
		// flex: 1;
		// background-color: #f5f8ff;
		// margin-top: 74px;
		// height: calc(100vh - 74px);
	}

	.news-banner {
		background-color: #f5f8ff;
		// height: 200rpx;
		// background-image: url('/static/newImg.jpg');
		// background-size: 100% 100%;
		margin: 15px;
		border-radius: 12px;
		// padding: 20px;
		// color: white;
		// position: relative;
		// overflow: hidden;
		box-shadow: 0 4px 15px rgba(43, 133, 228, 0.2);
	}

	.newsImg {
		height: 200rpx;
		background-image: url('/static/newImg.jpg');
		background-size: 100% 100%;
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
		padding: 20px;
	}

	.banner-content {
		display: flex;
		justify-content: space-between;
		// position: relative;
		z-index: 2;
		padding: 20rpx;
	}

	.banner-title {
		font-size: 14px;
		opacity: 0.9;
		margin-bottom: 5px;
		display: block;
	}

	.banner-main {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 8px;
		display: block;
	}

	.banner-subtitle {
		font-size: 12px;
		opacity: 0.8;
		margin-bottom: 10px;
		display: block;
	}

	.banner-tag {
		display: inline-block;
		background: rgba(255, 255, 255, 0.2);
		padding: 4px 12px;
		border-radius: 20px;
		font-size: 12px;
		backdrop-filter: blur(10px);
	}

	.banner-bg {
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		width: 80px;
		height: 80px;
		// background: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		z-index: 1;
	}

	.ai-section {
		margin: 25px 15px;
		background: white;
		border-radius: 12px;
		padding: 20px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 15px;
		color: #2b85e4;
		display: flex;
		align-items: center;
	}

	.section-title::before {
		content: '';
		width: 4px;
		height: 16px;
		background: #2b85e4;
		border-radius: 2px;
		margin-right: 8px;
	}

	.ai-content {
		// display: flex;
		// align-items: center;
		width: 100%;
		height: 150px;
		box-sizing: border-box;
		// background: linear-gradient(135deg, #f0f7ff 0%, #e6f2ff 100%);
		border-radius: 10px;
		// padding: 15px;
	}

	.ai-icon {
		width: 50px;
		height: 50px;
		background: linear-gradient(135deg, #2b85e4 0%, #4a9eff 100%);
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 24px;
		margin-right: 15px;
	}

	.ai-text {
		flex: 1;
	}

	.ai-title {
		font-size: 15px;
		font-weight: bold;
		margin-bottom: 5px;
		color: #333;
		display: block;
	}

	.ai-desc {
		font-size: 12px;
		color: #666;
		line-height: 1.4;
		display: block;
	}

	.knowledge-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 15px;
		padding: 0 15px 20px;
	}

	.knowledge-card {
		background: white;
		border-radius: 12px;
		padding: 20px 15px;
		text-align: center;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
		transition: all 0.3s ease;
		border: 1px solid #f0f0f0;
	}

	.knowledge-card:active {
		transform: translateY(-2px);
		box-shadow: 0 4px 20px rgba(43, 133, 228, 0.15);
	}

	.card-icon {
		width: 50px;
		height: 50px;
		margin: 0 auto 10px;
		background: linear-gradient(135deg, #2b85e4 0%, #4a9eff 100%);
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 24px;
	}

	.card-title {
		font-size: 14px;
		font-weight: bold;
		color: #333;
		margin-bottom: 5px;
		display: block;
	}

	.card-desc {
		font-size: 12px;
		color: #999;
		display: block;
	}
</style>